<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1 id="hh"></h1>
</body>

</html>
<script>
    // vue2的响应式原理核心方法 Es5中的 Object.defineProperty(劫持的对象,劫持的属性,选项)

    // 数据劫持

    // 使用defineProperty的属性存储符


    // Object.defineProperty(data, 'name', {
    //     enumerable: true,//是否枚举数据,如果是false,那么使用for in 无法遍历此数据
    //     configurable: true,//是否可配置属性,如果为false,那么无法通过delete这样的方法删除该树心
    //     get() {
    //         //访问这个属性的时候,会触发此函数,对象属性的值,由get返回值来决定

    //         console.log('name属性被访问了')

    //         return 777
    //     },
    //     set(val) {
    //         //等号赋值的时候,会传入给val
    //         console.log('name被设置了值是' + val)
    //     }
    // })

    let data = {
        name: "李雷",
        age: 30,
        person: {
            nickname: 'lbw'
        }
    }

    //observer 观察函数

    function observer(obj) {
        //判断obj是不是一个对象,如果不是一个对象,逻辑没有必要往下走
        if (typeof obj !== 'object') {
            return
        }
        Object.keys(obj).forEach(key => {
            defineReactive(obj, key, obj[key])
        })
    }

    observer(data)

    //defineReactive 定义响应的函数

    function defineReactive(obj, key, value) {
        observer(value)
        Object.defineProperty(obj, key, {
            get() {
                return value
            },
            set(val) {
                value = val;
                document.getElementById('hh').innerText = val;
            }
        })
    }
</script>